<!--
 * @Description: 
 * @version: 
 * @Author: King
 * @Date: 2022-03-05 14:22:52
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-04-13 15:40:16
-->
<template>
  <div class="container-pageTwo">
       {{this.DbSourceTwo}}
      <el-button @click="changeStateTwo">点击</el-button>
      <div>
        {{this.arrayData}}
        <el-button @click="bubbleSort">冒泡排序</el-button>
      </div>
  </div>
</template>

<script>
// import Vue from 'vue'
import {mapActions,mapState} from 'vuex'

export default {
 name:'PageTwo',
  data(){
    return {
      arrayData: [3, 5, 74, 64, 64, 3, 1, 8, 3, 49, 16, 161, 9, 4]
    }
  },
  computed:{
    // ...mapState(['DbSource'])
    // 模块化写法
    ...mapState({
      DbSourceTwo: state => state.DbSource,
    }),
  },
  // created(){
  //   this.$nextTick(this.arrayData)
  // },
  methods:{
    // 拿到actions.js中生命过的函数，可以在此组建中直接this.函数名，直接使用了
    ...mapActions(['saveDbSource']),
    changeStateTwo(){
      this.queryFormTwo = 200
      this.saveDbSource(this.queryFormTwo)
    },
    // 冒泡排序：
      // 1.比较相邻的两个元素，如果前一个比后一个大，则交换位置。
      // 2.第一轮的时候最后一个元素应该是最大的一个。
      // 3.按照步骤一的方法进行相邻两个元素的比较，这个时候由于最后一个元素已经是最大的了，所以最后一个元素不用比较。
    bubbleSort(){
      for(let i = 0; i < this.arrayData.length; i++){
        for(let j = 0; j < this.arrayData.length; j++){
          if(this.arrayData[j] > this.arrayData[j + 1]){
            let newArr = this.arrayData[j]
            this.arrayData[j] = this.arrayData[j + 1]
            this.arrayData[j + 1] = newArr
          }
        }
      }
      console.log(this.arrayData, '冒泡排序')
      // return this.arrayData
      // Vue.set(this.arrayData)
      this.$forceUpdate();
    },
    // 快速排序
      // 1.快速排序是对冒泡排序的一种改进，第一趟排序时将数据分成两部分，一部分比另一部分的所有数据都要小。
      // 2.然后递归调用，在两边都实行快速排序。
  }
}
</script>

<style lang='scss' scoped>
.container-pageTwo{
    height: 100%;
    width: 100%;
}
</style>